<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<uni-header></uni-header>
		<!-- #endif -->

		<view class="info-box com-box">
			<image :src="data.driverHeadPic ? data.driverHeadPic : '/static/missing-face.png'" class="head-pic" mode="widthFix"></image>
			<!-- <text>驾驶年龄：4年</text> -->
			<text>电话：{{data.driverPhone}}</text>
			<text>车牌号：{{data.numberPalte}}</text>
			<!-- <text>路线安排：山东潍坊--山东青岛</text>
			<text>预估时间：2020.03.02  12：00到达</text> -->
			<text>司机驾驶证：</text>
			<image v-if="data.driverLicense" :src="data.driverLicense" class="com-pic" mode="widthFix"></image>
			<text>车辆行驶证：</text>
			<image v-if="data.drivingLicense" :src="data.drivingLicense" class="com-pic" mode="widthFix"></image>
		</view>

		<view class="btn-box sp">
			<button type="primary" @click="call()">拨打电话</button>
		</view>

		<!-- #ifdef H5 -->
		<uni-footer></uni-footer>
		<!-- #endif -->
	</view>
</template>

<script>
	import uniHeader from '@/components/h5/uni-header.vue'
	import uniFooter from '@/components/h5/uni-footer.vue'
	export default {
		components: {
			uniHeader,
			uniFooter
		},
		data() {
			return {
				data: {}
			}
		},
		onLoad(option) {
			uni.showLoading({
				title: '正在查询'
			})
			uni.hideLoading()
			this.$api.request('/userOrder/orderDetail', {
				orderId: option.allOrder
			}, {
				content: 'application/x-www-form-urlencoded',
				failback: failres => {
					uni.hideLoading()
					this.$api.msg(failres.message)
				}
			}).then(res => {
				uni.hideLoading()
				this.data = res.data
			})
		},
		methods: {
			call() {
				uni.makePhoneCall({
					phoneNumber: this.data.driverPhone,
				})
			}
		}
	}
</script>

<style lang="scss">
	.info-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40upx $base-row-spacing;
		font-size: $base-font-base;
		line-height: 60upx;
		background-color: #fff;

		.head-pic {
			margin-bottom: 40upx;
			width: 160upx;
			height: 160upx;
		}

		.com-pic {
			margin-bottom: 40upx;
			width: 80%;
		}
	}

	.btn-box {
		padding: 0 $base-row-spacing 40upx;
		background-color: #fff;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 750px) {
		.info-box {
			margin: 20px auto;
			padding: 40px 30px;
			font-size: 16px;
			line-height: 30px;

			.head-pic {
				margin-bottom: 20px;
				width: 80px;
				height: 80px;
			}

			.com-pic {
				margin-bottom: 20px;
				width: 240px;
			}
		}
	}

	/* #endif */
</style>
